import { mouseposition } from "../global/location";
import server from "./server";
import luckysheetsizeauto from "./resize";
import { modelHTML } from "./constant";
import { checkProtectionAuthorityNormal } from "./protection";
import { getSheetIndex } from "../methods/get";
import { setluckysheet_scroll_status } from "../methods/set";
import { replaceHtml } from "../utils/util";
import Store from "../store";
import locale from "../locale/locale";
import tooltip from "../global/tooltip";
import method from "../global/method";

const imageCtrl = {
  imgItem: {
    type: "3", //1移动并调整单元格大小 2移动并且不调整单元格的大小 3不要移动单元格并调整其大小
    src: "", //图片url
    originWidth: null, //图片原始宽度
    originHeight: null, //图片原始高度
    default: {
      width: null, //图片 宽度
      height: null, //图片 高度
      left: null, //图片离表格左边的 位置
      top: null, //图片离表格顶部的 位置
    },
    crop: {
      width: null, //图片裁剪后 宽度
      height: null, //图片裁剪后 高度
      offsetLeft: 0, //图片裁剪后离未裁剪时 左边的位移
      offsetTop: 0, //图片裁剪后离未裁剪时 顶部的位移
    },
    isFixedPos: false, //固定位置
    fixedLeft: null, //固定位置 左位移
    fixedTop: null, //固定位置 右位移
    border: {
      width: 0, //边框宽度
      radius: 0, //边框半径
      style: "solid", //边框类型
      color: "#000", //边框颜色
    },
  },
  images: null,
  currentImgId: null,
  currentWinW: null,
  currentWinH: null,
  resize: null,
  resizeXY: null,
  move: false,
  moveXY: null,
  cropChange: null,
  cropChangeXY: null,
  cropChangeObj: null,
  copyImgItemObj: null,
  insertImg: function (file) {
    const uploadImage =
      Store.toJsonOptions && Store.toJsonOptions["uploadImage"];
    if (typeof uploadImage === "function") {
      // 上传形式
      uploadImage(file)
        .then((url) => {
          imageCtrl._insertImg(url);
        })
        .catch((error) => {
          tooltip.info(
            '<i class="fa fa-exclamation-triangle"></i>',
            "图片上传失败"
          );
        });
    } else {
      // 内部base64形式
      let render = new FileReader();
      render.readAsDataURL(file);

      render.onload = function (event) {
        let src = event.target.result;
        imageCtrl._insertImg(src);
        $("#luckysheet-imgUpload").val("");
      };
    }
  },

  _insertImg: function (src) {
    let _this = this;

    let last =
      Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
    let rowIndex = last.row_focus || 0;
    let colIndex = last.column_focus || 0;
    let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1];
    let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1];

    let image = new Image();
    image.onload = function () {
      let width = image.width,
        height = image.height;

      let img = {
        src: src,
        left: left,
        top: top,
        originWidth: width,
        originHeight: height,
      };

      _this.addImgItem(img);
    };
    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions["imageUrlHandle"];
    image.src =
      typeof imageUrlHandle === "function" ? imageUrlHandle(src) : src;
  },
  generateRandomId: function (prefix) {
    if (prefix == null) {
      prefix = "img";
    }

    let userAgent = window.navigator.userAgent
      .replace(/[^a-zA-Z0-9]/g, "")
      .split("");

    let mid = "";

    for (let i = 0; i < 12; i++) {
      mid += userAgent[Math.round(Math.random() * (userAgent.length - 1))];
    }

    let time = new Date().getTime();

    return prefix + "_" + mid + "_" + time;
  },
  modelHtml: function (id, imgItem) {
    let _this = this;

    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions["imageUrlHandle"];
    let src =
      typeof imageUrlHandle === "function"
        ? imageUrlHandle(imgItem.src)
        : imgItem.src;
    let imgItemParam = _this.getImgItemParam(imgItem);

    let width = imgItemParam.width * Store.zoomRatio;
    let height = imgItemParam.height * Store.zoomRatio;
    let left = imgItemParam.left * Store.zoomRatio;
    let top = imgItemParam.top * Store.zoomRatio;
    let position = imgItemParam.position;

    let borderWidth = imgItem.border.width;

    return `<div id="${id}" class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width:${width}px;height:${height}px;padding:0;position:${position};left:${left}px;top:${top}px;z-index:200;">
                    <div class="luckysheet-modal-dialog-content" style="width:100%;height:100%;overflow:hidden;position:relative;">
                        <img src="${src}" style="position:absolute;width:${
      imgItem.default.width * Store.zoomRatio
    }px;height:${imgItem.default.height * Store.zoomRatio}px;left:${
      -imgItem.crop.offsetLeft * Store.zoomRatio
    }px;top:${-imgItem.crop.offsetTop * Store.zoomRatio}px;" />
                    </div>
                    <div class="luckysheet-modal-dialog-border" style="border:${borderWidth}px ${
      imgItem.border.style
    } ${imgItem.border.color};border-radius:${
      imgItem.border.radius * Store.zoomRatio
    }px;position:absolute;left:${-borderWidth}px;right:${-borderWidth}px;top:${-borderWidth}px;bottom:${-borderWidth}px;"></div>
                </div>`;
  },
  getSliderHtml: function () {
    let imageText = locale().imageText;

    return `<div id="luckysheet-modal-dialog-slider-imageCtrl" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-imageCtrl" style="display:block;">
                    <div class="luckysheet-modal-dialog-slider-title">
                        <span>${imageText.imageSetting}</span>
                        <span class="luckysheet-model-close-btn" title="${imageText.close}">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="luckysheet-modal-dialog-slider-content">
                        <div class="slider-box">
                            <div class="slider-box-title">${imageText.conventional}</div>
                            <div class="slider-box-radios">
                                <div class="radio-item">
                                    <input type="radio" id="imgItemType1" name="imgItemType" value="1">
                                    <label for="imgItemType1">${imageText.moveCell1}</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="imgItemType2" name="imgItemType" value="2">
                                    <label for="imgItemType2">${imageText.moveCell2}</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="imgItemType3" name="imgItemType" value="3">
                                    <label for="imgItemType3">${imageText.moveCell3}</label>
                                </div>
                            </div>
                            <div class="slider-box-checkbox">
                                <input type="checkbox" id="imgItemIsFixedPos">
                                <label for="imgItemIsFixedPos">${imageText.fixedPos}</label>
                            </div>
                        </div>
                        <div class="slider-box">
                            <div class="slider-box-title">${imageText.border}</div>
                            <div class="slider-box-borderConfig">
                                <div class="border-item">
                                    <label>${imageText.width}</label>
                                    <input type="number" id="imgItemBorderWidth" min="0">
                                </div>
                                <div class="border-item">
                                    <label>${imageText.radius}</label>
                                    <input type="number" id="imgItemBorderRadius" min="0">
                                </div>
                                <div class="border-item">
                                    <label>${imageText.style}</label>
                                    <select id="imgItemBorderStyle">
                                        <option value="solid">${imageText.solid}</option>
                                        <option value="dashed">${imageText.dashed}</option>
                                        <option value="dotted">${imageText.dotted}</option>
                                        <option value="double">${imageText.double}</option>
                                    </select>
                                </div>
                                <div class="border-item">
                                    <label>${imageText.color}</label>
                                    <div id="imgItemBorderColor" class="imgItemBorderColor">
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;
  },
  sliderHtmlShow: function () {
    let _this = this;

    $("#luckysheet-modal-dialog-slider-imageCtrl").remove();

    let sliderHtml = _this.getSliderHtml();
    $("body").append(sliderHtml);
    luckysheetsizeauto();

    let imgItem = _this.images[_this.currentImgId];

    //类型
    let type = imgItem.type;
    $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemType" + type).prop(
      "checked",
      true
    );

    //固定位置
    let isFixedPos = imgItem.isFixedPos;
    $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemIsFixedPos").prop(
      "checked",
      isFixedPos
    );

    //边框宽度
    let border = imgItem.border;
    $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderWidth").val(
      border.width
    );
    $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderRadius").val(
      border.radius
    );
    $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderStyle").val(
      border.style
    );
    $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span")
      .css("background-color", border.color)
      .attr("title", border.color);

    _this.init();
  },
  colorSelectDialog: function (currenColor) {
    const _locale = locale();
    const locale_button = _locale.button;
    const locale_toolbar = _locale.toolbar;
    const locale_imageCtrl = _locale.imageCtrl;

    $("#luckysheet-modal-dialog-mask").show();
    $("#luckysheet-imageCtrl-colorSelect-dialog").remove();

    $("body").append(
      replaceHtml(modelHTML, {
        id: "luckysheet-imageCtrl-colorSelect-dialog",
        addclass: "luckysheet-imageCtrl-colorSelect-dialog",
        title: locale_imageCtrl.borderTile,
        content: `<div class="currenColor">
                            ${locale_imageCtrl.borderCur}:<span title="${currenColor}" style="background-color:${currenColor}"></span>
                        </div>
                        <div class="colorshowbox"></div>`,
        botton: `<button id="luckysheet-imageCtrl-colorSelect-dialog-confirm" class="btn btn-primary">${locale_button.confirm}</button>
                        <button class="btn btn-default luckysheet-model-close-btn">${locale_button.cancel}</button>`,
        style: "z-index:100003",
      })
    );
    let $t = $("#luckysheet-imageCtrl-colorSelect-dialog")
        .find(".luckysheet-modal-dialog-content")
        .css("min-width", 300)
        .end(),
      myh = $t.outerHeight(),
      myw = $t.outerWidth();
    let winw = $(window).width(),
      winh = $(window).height();
    let scrollLeft = $(document).scrollLeft(),
      scrollTop = $(document).scrollTop();
    $("#luckysheet-imageCtrl-colorSelect-dialog")
      .css({
        left: (winw + scrollLeft - myw) / 2,
        top: (winh + scrollTop - myh) / 3,
      })
      .show();

    //初始化选择颜色插件
    $("#luckysheet-imageCtrl-colorSelect-dialog")
      .find(".colorshowbox")
      .spectrum({
        showPalette: true,
        showPaletteOnly: true,
        preferredFormat: "hex",
        clickoutFiresChange: false,
        showInitial: true,
        showInput: true,
        flat: true,
        hideAfterPaletteSelect: true,
        showSelectionPalette: true,
        showButtons: false, //隐藏选择取消按钮
        maxPaletteSize: 8,
        maxSelectionSize: 8,
        color: currenColor,
        cancelText: locale_button.cancel,
        chooseText: locale_toolbar.confirmColor,
        togglePaletteMoreText: locale_toolbar.customColor,
        togglePaletteLessText: locale_toolbar.collapse,
        togglePaletteOnly: true,
        clearText: locale_toolbar.clearText,
        noColorSelectedText: locale_toolbar.noColorSelectedText,
        localStorageKey: "spectrum.textcolor" + server.gridKey,
        palette: [
          ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
          ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
          [
            "#f4cccc",
            "#fce5cd",
            "#fff2cc",
            "#d9ead3",
            "#d0e0e3",
            "#cfe2f3",
            "#d9d2e9",
            "#ead1dc",
          ],
          [
            "#ea9999",
            "#f9cb9c",
            "#ffe599",
            "#b6d7a8",
            "#a2c4c9",
            "#9fc5e8",
            "#b4a7d6",
            "#d5a6bd",
          ],
          [
            "#e06666",
            "#f6b26b",
            "#ffd966",
            "#93c47d",
            "#76a5af",
            "#6fa8dc",
            "#8e7cc3",
            "#c27ba0",
          ],
          [
            "#c00",
            "#e69138",
            "#f1c232",
            "#6aa84f",
            "#45818e",
            "#3d85c6",
            "#674ea7",
            "#a64d79",
          ],
          [
            "#900",
            "#b45f06",
            "#bf9000",
            "#38761d",
            "#134f5c",
            "#0b5394",
            "#351c75",
            "#741b47",
          ],
          [
            "#600",
            "#783f04",
            "#7f6000",
            "#274e13",
            "#0c343d",
            "#073763",
            "#20124d",
            "#4c1130",
          ],
        ],
        move: function (color) {
          if (color != null) {
            color = color.toHexString();
          } else {
            color = "#000";
          }

          $("#luckysheet-imageCtrl-colorSelect-dialog .currenColor span")
            .css("background-color", color)
            .attr("title", color);
        },
      });
  },
  init: function () {
    let _this = this;

    //关闭
    $(
      "#luckysheet-modal-dialog-slider-imageCtrl .luckysheet-model-close-btn"
    ).click(function () {
      $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
      luckysheetsizeauto();
    });

    //常规
    $("#luckysheet-modal-dialog-slider-imageCtrl")
      .off("change.radio")
      .on(
        "change.radio",
        ".radio-item input[type=radio][name=imgItemType]",
        function () {
          _this.configChange("type", this.value);
        }
      );

    //固定位置
    $("#luckysheet-modal-dialog-slider-imageCtrl")
      .off("change.checkbox")
      .on(
        "change.checkbox",
        ".slider-box-checkbox input[type=checkbox]",
        function () {
          _this.configChange("fixedPos", this.checked);
        }
      );

    //边框宽度
    $("#luckysheet-modal-dialog-slider-imageCtrl")
      .off("change.borderWidth")
      .on("change.borderWidth", "#imgItemBorderWidth", function () {
        _this.configChange("border-width", this.valueAsNumber);
      });

    //边框半径
    $("#luckysheet-modal-dialog-slider-imageCtrl")
      .off("change.borderRadius")
      .on("change.borderRadius", "#imgItemBorderRadius", function () {
        _this.configChange("border-radius", this.valueAsNumber);
      });

    //边框样式
    $("#luckysheet-modal-dialog-slider-imageCtrl")
      .off("change.borderStyle")
      .on("change.borderStyle", "#imgItemBorderStyle", function () {
        _this.configChange("border-style", this.value);
      });

    //边框颜色 选择
    $("#luckysheet-modal-dialog-slider-imageCtrl")
      .off("click.color")
      .on("click.color", "#imgItemBorderColor", function () {
        let currenColor = $(this).find("span").attr("title");
        _this.colorSelectDialog(currenColor);
      });

    //边框选择颜色 确定
    $(document)
      .off("click.selectColorConfirm")
      .on(
        "click.selectColorConfirm",
        "#luckysheet-imageCtrl-colorSelect-dialog-confirm",
        function () {
          let $parent = $(this).parents(
            "#luckysheet-imageCtrl-colorSelect-dialog"
          );
          $("#luckysheet-modal-dialog-mask").hide();
          $parent.hide();

          let currenColor = $parent.find(".currenColor span").attr("title");
          $(
            "#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span"
          )
            .css("background-color", currenColor)
            .attr("title", currenColor);

          _this.configChange("border-color", currenColor);
        }
      );

    //image active
    $("#luckysheet-image-showBoxs")
      .off("mousedown.active")
      .on("mousedown.active", ".luckysheet-modal-dialog-image", function (e) {
        let id = $(this).attr("id");
        let item = _this.images[id];
        let signUrlMap = Store.signUrlMap;
        for (const key in signUrlMap) {
          if (
            Store.detailType == 3 &&
            Object.hasOwnProperty.call(signUrlMap, key)
          ) {
            const element = signUrlMap[key];
            if (element.url == item.src) {
              window.parent.postMessage(
                {
                  command: "getImageSuccess",
                  data: item.src,
                },
                "*"
              );
              return;
            }
          }
        }
        let isSignUrl = false;
        for (const key in signUrlMap) {
          if (
            Store.detailType == 2 &&
            Object.hasOwnProperty.call(signUrlMap, key)
          ) {
            const element = signUrlMap[key];
            if (element.url == item.src) {
              isSignUrl = true;
            }
          }
        }
        if ((!isSignUrl && Store.detailType == 2) || Store.detailType == 3) {
          return;
        }
        if (
          !checkProtectionAuthorityNormal(
            Store.currentSheetIndex,
            "editObjects",
            false
          )
        ) {
          return;
        }

        $(this).hide();

        if (_this.currentImgId != null && _this.currentImgId != id) {
          _this.cancelActiveImgItem();
        }

        _this.currentImgId = id;

        let imgItemParam = _this.getImgItemParam(item);

        let width = imgItemParam.width * Store.zoomRatio;
        let height = imgItemParam.height * Store.zoomRatio;
        let left = imgItemParam.left * Store.zoomRatio;
        let top = imgItemParam.top * Store.zoomRatio;
        let position = imgItemParam.position;

        $("#luckysheet-modal-dialog-activeImage").show().css({
          width: width,
          height: height,
          left: left,
          top: top,
          position: position,
        });
        let imageUrlHandle =
          Store.toJsonOptions && Store.toJsonOptions["imageUrlHandle"];
        let imgUrl =
          typeof imageUrlHandle === "function"
            ? imageUrlHandle(item.src)
            : item.src;
        $(
          "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content"
        ).css({
          "background-image": "url(" + imgUrl + ")",
          "background-size":
            item.default.width * Store.zoomRatio +
            "px " +
            item.default.height * Store.zoomRatio +
            "px",
          "background-position":
            -item.crop.offsetLeft * Store.zoomRatio +
            "px " +
            -item.crop.offsetTop * Store.zoomRatio +
            "px",
        });

        $(
          "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border"
        ).css({
          "border-width": item.border.width * Store.zoomRatio,
          "border-style": item.border.style,
          "border-color": item.border.color,
          "border-radius": item.border.radius * Store.zoomRatio,
          left: -item.border.width * Store.zoomRatio,
          right: -item.border.width * Store.zoomRatio,
          top: -item.border.width * Store.zoomRatio,
          bottom: -item.border.width * Store.zoomRatio,
        });

        // _this.sliderHtmlShow();

        e.stopPropagation();
      });

    //image move
    $("#luckysheet-modal-dialog-activeImage")
      .off("mousedown.move")
      .on("mousedown.move", ".luckysheet-modal-dialog-content", function (e) {
        if (
          !checkProtectionAuthorityNormal(
            Store.currentSheetIndex,
            "editObjects",
            false
          ) ||
          Store.detailType == 2
        ) {
          return;
        }

        // if (!$("#luckysheet-modal-dialog-slider-imageCtrl").is(":visible")) {
        //   _this.sliderHtmlShow();
        // }

        _this.move = true;

        _this.currentWinW = $("#luckysheet-cell-main")[0].scrollWidth;
        _this.currentWinH = $("#luckysheet-cell-main")[0].scrollHeight;

        let offset = $("#luckysheet-modal-dialog-activeImage").offset();

        _this.moveXY = [e.pageX - offset.left, e.pageY - offset.top];

        setluckysheet_scroll_status(true);

        e.stopPropagation();
      });

    //image resize
    $("#luckysheet-modal-dialog-activeImage")
      .off("mousedown.resize")
      .on(
        "mousedown.resize",
        ".luckysheet-modal-dialog-resize-item",
        function (e) {
          if (
            !checkProtectionAuthorityNormal(
              Store.currentSheetIndex,
              "editObjects",
              false
            )
          ) {
            return;
          }

          _this.currentWinW = $("#luckysheet-cell-main")[0].scrollWidth;
          _this.currentWinH = $("#luckysheet-cell-main")[0].scrollHeight;

          _this.resize = $(this).data("type");

          let scrollTop = $("#luckysheet-cell-main").scrollTop(),
            scrollLeft = $("#luckysheet-cell-main").scrollLeft();
          let mouse = mouseposition(e.pageX, e.pageY);
          let x = mouse[0] + scrollLeft;
          let y = mouse[1] + scrollTop;

          let position = $("#luckysheet-modal-dialog-activeImage").position();
          let width = $("#luckysheet-modal-dialog-activeImage").width();
          let height = $("#luckysheet-modal-dialog-activeImage").height();

          _this.resizeXY = [
            x,
            y,
            width,
            height,
            position.left + scrollLeft,
            position.top + scrollTop,
            scrollLeft,
            scrollTop,
          ];

          setluckysheet_scroll_status(true);

          e.stopPropagation();
        }
      );

    //image croppingEnter
    $("#luckysheet-modal-dialog-activeImage")
      .off("mousedown.croppingEnter")
      .on(
        "mousedown.croppingEnter",
        ".luckysheet-modal-controll-crop",
        function (e) {
          _this.croppingEnter();
          e.stopPropagation();
        }
      );

    //image croppingExit
    $("#luckysheet-modal-dialog-cropping")
      .off("mousedown.croppingExit")
      .on(
        "mousedown.croppingExit",
        ".luckysheet-modal-controll-crop",
        function (e) {
          _this.croppingExit();
          e.stopPropagation();
        }
      );

    //image crop change
    $("#luckysheet-modal-dialog-cropping")
      .off("mousedown.cropChange")
      .on("mousedown.cropChange", ".resize-item", function (e) {
        _this.cropChange = $(this).data("type");

        let scrollTop = $("#luckysheet-cell-main").scrollTop(),
          scrollLeft = $("#luckysheet-cell-main").scrollLeft();
        let mouse = mouseposition(e.pageX, e.pageY);
        let x = mouse[0] + scrollLeft;
        let y = mouse[1] + scrollTop;

        _this.cropChangeXY = [x, y];

        setluckysheet_scroll_status(true);

        e.stopPropagation();
      });

    //image restore
    $("#luckysheet-image-showBoxs")
      .off("mousedown.restore")
      .on(
        "mousedown.restore",
        ".luckysheet-modal-controll-restore",
        function (e) {
          _this.restoreImgItem();
          e.stopPropagation();
        }
      );

    //image delete
    $("#luckysheet-image-showBoxs")
      .off("mousedown.delete")
      .on("mousedown.delete", ".luckysheet-modal-controll-del", function (e) {
        _this.removeImgItem();
        e.stopPropagation();
      });
  },
  configChange: function (type, value) {
    let _this = this;

    let imgItem = _this.images[_this.currentImgId];

    switch (type) {
      case "type":
        imgItem.type = value;
        break;
      case "fixedPos":
        imgItem.isFixedPos = value;

        let imgItemParam = _this.getImgItemParam(imgItem);
        let width = imgItemParam.width;
        let height = imgItemParam.height;
        let left = imgItemParam.left;
        let top = imgItemParam.top;
        let position = imgItemParam.position;

        $("#luckysheet-modal-dialog-activeImage").show().css({
          width: width,
          height: height,
          left: left,
          top: top,
          position: position,
        });
        break;
      case "border-width":
        imgItem.border.width = value;
        $(
          "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border"
        ).css({
          "border-width": value,
          left: -value,
          right: -value,
          top: -value,
          bottom: -value,
        });
        break;
      case "border-radius":
        imgItem.border.radius = value;
        $(
          "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border"
        ).css("border-radius", value);
        break;
      case "border-style":
        imgItem.border.style = value;
        $(
          "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border"
        ).css("border-style", value);
        break;
      case "border-color":
        imgItem.border.color = value;
        $(
          "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border"
        ).css("border-color", value);
        break;
    }

    _this.ref();
  },
  getImgItemParam(imgItem) {
    let isFixedPos = imgItem.isFixedPos;

    let width = imgItem.default.width,
      height = imgItem.default.height,
      left = imgItem.default.left,
      top = imgItem.default.top;

    if (imgItem.crop.width != width || imgItem.crop.height != height) {
      width = imgItem.crop.width;
      height = imgItem.crop.height;
      left += imgItem.crop.offsetLeft;
      top += imgItem.crop.offsetTop;
    }

    let position = "absolute";
    if (isFixedPos) {
      position = "fixed";
      left = imgItem.fixedLeft + imgItem.crop.offsetLeft;
      top = imgItem.fixedTop + imgItem.crop.offsetTop;
    }

    return {
      width: width,
      height: height,
      left: left,
      top: top,
      position: position,
    };
  },
  cancelActiveImgItem: function () {
    let _this = this;

    $("#luckysheet-modal-dialog-activeImage").hide();
    $("#luckysheet-modal-dialog-cropping").hide();
    $("#luckysheet-modal-dialog-slider-imageCtrl").hide();

    let imgItem = _this.images[_this.currentImgId];
    let imgItemParam = _this.getImgItemParam(imgItem);

    let width = imgItemParam.width * Store.zoomRatio;
    let height = imgItemParam.height * Store.zoomRatio;
    let left = imgItemParam.left * Store.zoomRatio;
    let top = imgItemParam.top * Store.zoomRatio;
    let position = imgItemParam.position;

    $("#" + _this.currentImgId)
      .show()
      .css({
        width: width,
        height: height,
        left: left,
        top: top,
        position: position,
      });
    $("#" + _this.currentImgId + " img").css({
      width: imgItem.default.width * Store.zoomRatio,
      height: imgItem.default.height * Store.zoomRatio,
      left: -imgItem.crop.offsetLeft * Store.zoomRatio,
      top: -imgItem.crop.offsetTop * Store.zoomRatio,
    });
    $("#" + _this.currentImgId + " .luckysheet-modal-dialog-border").css({
      "border-width": imgItem.border.width * Store.zoomRatio,
      "border-style": imgItem.border.style,
      "border-color": imgItem.border.color,
      "border-radius": imgItem.border.radius * Store.zoomRatio,
      left: -imgItem.border.width * Store.zoomRatio,
      right: -imgItem.border.width * Store.zoomRatio,
      top: -imgItem.border.width * Store.zoomRatio,
      bottom: -imgItem.border.width * Store.zoomRatio,
    });

    _this.currentImgId = null;
  },
  addImgItem: function (img) {
    let _this = this;

    let width, height;
    let max = 400;

    if (img.originHeight < img.originWidth) {
      height = Math.round(img.originHeight * (max / img.originWidth));
      width = max;
    } else {
      width = Math.round(img.originWidth * (max / img.originHeight));
      height = max;
    }
    if (img.customWidth) {
      width = img.customWidth;
      height = img.customHeight;
    }
    if (_this.images == null) {
      _this.images = {};
    }

    let imgItem = $.extend(true, {}, _this.imgItem);
    imgItem.src = img.src;
    imgItem.originWidth = img.originWidth / Store.zoomRatio;
    imgItem.originHeight = img.originHeight / Store.zoomRatio;
    imgItem.default.width = width / Store.zoomRatio;
    imgItem.default.height = height / Store.zoomRatio;
    imgItem.default.left = img.left / Store.zoomRatio;
    imgItem.default.top = img.top / Store.zoomRatio;
    imgItem.crop.width = width / Store.zoomRatio;
    imgItem.crop.height = height / Store.zoomRatio;

    let scrollTop = $("#luckysheet-cell-main").scrollTop(),
      scrollLeft = $("#luckysheet-cell-main").scrollLeft();

    imgItem.fixedLeft = img.left - scrollLeft + Store.rowHeaderWidth;
    imgItem.fixedTop =
      img.top -
      scrollTop +
      Store.infobarHeight +
      Store.toolbarHeight +
      Store.calculatebarHeight +
      Store.columnHeaderHeight;

    let id = _this.generateRandomId();
    let modelHtml = _this.modelHtml(id, imgItem);

    $("#luckysheet-image-showBoxs .img-list").append(modelHtml);

    _this.images[id] = imgItem;
    _this.ref();

    _this.init();
  },
  moveImgItem: function () {
    let _this = this;

    _this.move = false;

    let obj = $("#luckysheet-modal-dialog-activeImage")[0];
    let item = _this.images[_this.currentImgId];

    if (item.isFixedPos) {
      item.fixedLeft = obj.offsetLeft - item.crop.offsetLeft;
      item.fixedTop = obj.offsetTop - item.crop.offsetTop;
    } else {
      item.default.left = obj.offsetLeft - item.crop.offsetLeft;
      item.default.top = obj.offsetTop - item.crop.offsetTop;
    }

    _this.ref();
  },
  resizeImgItem: function () {
    let _this = this;

    _this.resize = null;

    let obj = $("#luckysheet-modal-dialog-activeImage")[0];

    let item = _this.images[_this.currentImgId];
    let scaleX = obj.clientWidth / item.crop.width;
    let scaleY = obj.clientHeight / item.crop.height;

    item.default.width = Math.round(item.default.width * scaleX);
    item.default.height = Math.round(item.default.height * scaleY);

    item.crop.width = Math.round(item.crop.width * scaleX);
    item.crop.height = Math.round(item.crop.height * scaleY);
    item.crop.offsetLeft = Math.round(item.crop.offsetLeft * scaleX);
    item.crop.offsetTop = Math.round(item.crop.offsetTop * scaleY);

    if (item.isFixedPos) {
      item.fixedLeft = obj.offsetLeft;
      item.fixedTop = obj.offsetTop;
    } else {
      item.default.left = obj.offsetLeft - item.crop.offsetLeft;
      item.default.top = obj.offsetTop - item.crop.offsetTop;
    }

    _this.ref();
  },
  croppingEnter: function () {
    let _this = this;
    _this.cropping = true;

    if (
      !checkProtectionAuthorityNormal(
        Store.currentSheetIndex,
        "editObjects",
        false
      )
    ) {
      return;
    }

    $("#luckysheet-modal-dialog-activeImage").hide();
    $("#luckysheet-modal-dialog-slider-imageCtrl").hide();

    let item = _this.images[_this.currentImgId];
    let imgItemParam = _this.getImgItemParam(item);

    let width = imgItemParam.width;
    let height = imgItemParam.height;
    let left = imgItemParam.left;
    let top = imgItemParam.top;
    let position = imgItemParam.position;

    $("#luckysheet-modal-dialog-cropping").show().css({
      width: width,
      height: height,
      left: left,
      top: top,
      position: position,
    });

    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions["imageUrlHandle"];
    let imgSrc =
      typeof imageUrlHandle === "function"
        ? imageUrlHandle(item.src)
        : item.src;

    $("#luckysheet-modal-dialog-cropping .cropping-mask").css({
      width: item.default.width,
      height: item.default.height,
      "background-image": "url(" + imgSrc + ")",
      left: -item.crop.offsetLeft,
      top: -item.crop.offsetTop,
    });

    $("#luckysheet-modal-dialog-cropping .cropping-content").css({
      "background-image": "url(" + imgSrc + ")",
      "background-size":
        item.default.width + "px " + item.default.height + "px",
      "background-position":
        -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px",
    });

    $("#luckysheet-modal-dialog-cropping .luckysheet-modal-dialog-border").css({
      "border-width": item.border.width,
      "border-style": item.border.style,
      "border-color": item.border.color,
      "border-radius": item.border.radius,
      left: -item.border.width,
      right: -item.border.width,
      top: -item.border.width,
      bottom: -item.border.width,
    });
  },
  croppingExit: function () {
    let _this = this;
    _this.cropping = false;

    $("#luckysheet-modal-dialog-cropping").hide();

    let item = _this.images[_this.currentImgId];
    let imgItemParam = _this.getImgItemParam(item);

    let width = imgItemParam.width;
    let height = imgItemParam.height;
    let left = imgItemParam.left;
    let top = imgItemParam.top;
    let position = imgItemParam.position;

    $("#luckysheet-modal-dialog-activeImage").show().css({
      width: width,
      height: height,
      left: left,
      top: top,
      position: position,
    });
    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions["imageUrlHandle"];
    let imgSrc =
      typeof imageUrlHandle === "function"
        ? imageUrlHandle(item.src)
        : item.src;

    $(
      "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content"
    ).css({
      "background-image": "url(" + imgSrc + ")",
      "background-size":
        item.default.width + "px " + item.default.height + "px",
      "background-position":
        -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px",
    });
  },
  cropChangeImgItem: function () {
    let _this = this;

    _this.cropChange = null;

    let item = _this.images[_this.currentImgId];
    item.crop.width = _this.cropChangeObj.width;
    item.crop.height = _this.cropChangeObj.height;
    item.crop.offsetLeft = _this.cropChangeObj.offsetLeft;
    item.crop.offsetTop = _this.cropChangeObj.offsetTop;

    _this.ref();
  },
  restoreImgItem: function () {
    let _this = this;
    let imgItem = _this.images[_this.currentImgId];

    imgItem.default.width = imgItem.originWidth;
    imgItem.default.height = imgItem.originHeight;

    imgItem.crop.width = imgItem.originWidth;
    imgItem.crop.height = imgItem.originHeight;
    imgItem.crop.offsetLeft = 0;
    imgItem.crop.offsetTop = 0;

    let imgItemParam = _this.getImgItemParam(imgItem);

    let width = imgItemParam.width;
    let height = imgItemParam.height;
    let left = imgItemParam.left;
    let top = imgItemParam.top;
    let position = imgItemParam.position;

    $("#luckysheet-modal-dialog-activeImage").show().css({
      width: width,
      height: height,
      left: left,
      top: top,
      position: position,
    });

    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions["imageUrlHandle"];
    let imgSrc =
      typeof imageUrlHandle === "function"
        ? imageUrlHandle(imgItem.src)
        : imgItem.src;

    $(
      "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content"
    ).css({
      "background-image": "url(" + imgSrc + ")",
      "background-size":
        imgItem.default.width + "px " + imgItem.default.height + "px",
      "background-position":
        -imgItem.crop.offsetLeft + "px " + -imgItem.crop.offsetTop + "px",
    });

    _this.ref();
  },
  removeImgItem: function () {
    let _this = this;
    let imgItem = _this.images[_this.currentImgId];

    // 钩子 imageDeleteBefore
    if (!method.createHookFunction("imageDeleteBefore", imgItem)) {
      return;
    }

    $("#luckysheet-modal-dialog-activeImage").hide();
    $("#luckysheet-modal-dialog-cropping").hide();
    $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
    $("#" + _this.currentImgId).remove();

    delete _this.images[_this.currentImgId];
    _this.currentImgId = null;

    // 钩子 imageDeleteAfter
    method.createHookFunction("imageDeleteAfter", imgItem);
    _this.ref();
  },
  copyImgItem: function (e) {
    let _this = this;

    _this.copyImgItemObj = $.extend(true, {}, _this.images[_this.currentImgId]);

    let clipboardData = window.clipboardData; //for IE
    if (!clipboardData) {
      // for chrome
      clipboardData = e.originalEvent.clipboardData;
    }

    let cpdata =
      '<table data-type="luckysheet_copy_action_image"><tr><td><td></tr></table>';

    if (!clipboardData) {
      let textarea = $("#luckysheet-copy-content");
      textarea.html(cpdata);
      textarea.focus();
      textarea.select();
      document.execCommand("selectAll");
      document.execCommand("Copy");
      // 等50毫秒，keyPress事件发生了再去处理数据
      setTimeout(function () {
        $("#luckysheet-copy-content").blur();
      }, 10);
    } else {
      clipboardData.setData("Text", cpdata);
      return false; //否则设不生效
    }
  },
  pasteImgItem: function () {
    let _this = this;

    if (_this.images == null) {
      _this.images = {};
    }

    let rowIndex = Store.luckysheet_select_save[0].row_focus || 0;
    let colIndex = Store.luckysheet_select_save[0].column_focus || 0;
    let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1];
    let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1];

    let img = $.extend(true, {}, _this.copyImgItemObj);

    img.default.left = left - img.crop.offsetLeft;
    img.default.top = top - img.crop.offsetTop;

    let scrollTop = $("#luckysheet-cell-main").scrollTop(),
      scrollLeft = $("#luckysheet-cell-main").scrollLeft();

    img.fixedLeft = img.default.left - scrollLeft + Store.rowHeaderWidth;
    img.fixedTop =
      img.default.top -
      scrollTop +
      Store.infobarHeight +
      Store.toolbarHeight +
      Store.calculatebarHeight +
      Store.columnHeaderHeight;

    let id = _this.generateRandomId();
    let modelHtml = _this.modelHtml(id, img);

    $("#luckysheet-image-showBoxs .img-list").append(modelHtml);

    _this.images[id] = img;
    _this.ref();

    _this.init();
  },
  allImagesShow: function () {
    let _this = this;

    $("#luckysheet-modal-dialog-activeImage").hide();
    $("#luckysheet-modal-dialog-cropping").hide();
    $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
    $("#luckysheet-image-showBoxs .img-list").empty();

    if (_this.images == null) {
      return;
    }

    for (let imgId in _this.images) {
      let imgItem = _this.images[imgId];
      let modelHtml = _this.modelHtml(imgId, imgItem);
      $("#luckysheet-image-showBoxs .img-list").append(modelHtml);
    }
  },
  moveChangeSize: function (rc, index, size) {
    let _this = this;
    let images = $.extend(true, {}, _this.images);

    if (rc == "row") {
      let row = Store.visibledatarow[index],
        row_pre = index - 1 == -1 ? 0 : Store.visibledatarow[index - 1];
      let changeSize = size - (row - row_pre - 1);

      for (let imgId in images) {
        let imgItem = images[imgId];
        let imgItemParam = _this.getImgItemParam(imgItem);
        let type = imgItem.type;

        if (type == "1") {
          if (imgItemParam.top >= row) {
            imgItem.default.top =
              imgItemParam.top + changeSize - imgItem.crop.offsetTop;
          } else {
            if (imgItemParam.top + imgItemParam.height >= row - 2) {
              if (imgItemParam.top < row + changeSize) {
                let scaleY =
                  (imgItemParam.height + changeSize) / imgItemParam.height;
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                );
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY);
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                );
              } else {
                let scaleY =
                  (imgItemParam.top + imgItemParam.height - row) /
                  imgItemParam.height;
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                );
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY);
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                );
                imgItem.default.top = row + changeSize - imgItem.crop.offsetTop;
              }
            } else {
              if (imgItemParam.top > row + changeSize) {
                let scaleY = 1 / imgItemParam.height;
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                );
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY);
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                );
                imgItem.default.top = row + changeSize - imgItem.crop.offsetTop;
              } else if (
                imgItemParam.top + imgItemParam.height >
                row + changeSize
              ) {
                let scaleY =
                  (row + changeSize - imgItemParam.top) / imgItemParam.height;
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                );
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY);
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                );
              }
            }
          }
        } else if (type == "2") {
          if (imgItemParam.top >= row) {
            imgItem.default.top =
              imgItemParam.top + changeSize - imgItem.crop.offsetTop;
          } else if (imgItemParam.top > row + changeSize) {
            imgItem.default.top = row + changeSize - imgItem.crop.offsetTop;
          }
        }
      }
    } else if (rc == "column") {
      let col = Store.visibledatacolumn[index],
        col_pre = index - 1 == -1 ? 0 : Store.visibledatacolumn[index - 1];
      let changeSize = size - (col - col_pre - 1);

      for (let imgId in images) {
        let imgItem = images[imgId];
        let imgItemParam = _this.getImgItemParam(imgItem);
        let type = imgItem.type;

        if (type == "1") {
          if (imgItemParam.left >= col) {
            imgItem.default.left =
              imgItemParam.left + changeSize - imgItem.crop.offsetLeft;
          } else {
            if (imgItemParam.left + imgItemParam.width >= col - 2) {
              if (imgItemParam.left < col + changeSize) {
                let scaleX =
                  (imgItemParam.width + changeSize) / imgItemParam.width;
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                );
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX);
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                );
              } else {
                let scaleX =
                  (imgItemParam.left + imgItemParam.width - col) /
                  imgItemParam.width;
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                );
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX);
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                );
                imgItem.default.left =
                  col + changeSize - imgItem.crop.offsetLeft;
              }
            } else {
              if (imgItemParam.left > col + changeSize) {
                let scaleX = 1 / imgItemParam.width;
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                );
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX);
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                );
                imgItem.default.left =
                  col + changeSize - imgItem.crop.offsetLeft;
              } else if (
                imgItemParam.left + imgItemParam.width >
                col + changeSize
              ) {
                let scaleX =
                  (col + changeSize - imgItemParam.left) / imgItemParam.width;
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                );
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX);
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                );
              }
            }
          }
        } else if (type == "2") {
          if (imgItemParam.left >= col) {
            imgItem.default.left =
              imgItemParam.left + changeSize - imgItem.crop.offsetLeft;
          } else if (imgItemParam.left > col + changeSize) {
            imgItem.default.left = col + changeSize - imgItem.crop.offsetLeft;
          }
        }
      }
    }

    return images;
  },
  ref: function () {
    let _this = this;

    let file = Store.luckysheetfile[getSheetIndex(Store.currentSheetIndex)];
    let images = _this.images;

    if (Store.clearjfundo) {
      Store.jfundo.length = 0;

      Store.jfredo.push({
        type: "imageCtrl",
        sheetIndex: Store.currentSheetIndex,
        images: file.images == null ? null : $.extend(true, {}, file.images),
        curImages: images,
      });
    }

    file.images = $.extend(true, {}, images);
    server.saveParam("all", Store.currentSheetIndex, file.images, {
      k: "images",
    });
  },
};

export default imageCtrl;
